<template>
	<div class="task">
		<div class="top">
			任务中心
		</div>
		<div class="header"> 
		<div style="color: #888C9B; ">团队进入答题卷面后，系统将随机分配角色及对应技能</div>
		<div>
		模板下载： <a href="#">手动指定</a>
					<a href="#">模板下载</a>
					
		</div>
		</div>
		<div class="container">
			  <el-table
			    :data="tableData"
			    stripe
			    style="width: 100%">
			    <el-table-column
				  type=index
			      label="序列"
			      width="80">
			    </el-table-column>
			    <el-table-column
			      prop="taskName"
			      label="任务名称"
			      width="220">
			    </el-table-column>
			    <el-table-column
			      prop="startTime"
			      label="时间"
				  width="180">
			    </el-table-column>
				<el-table-column
				  prop="role"
				  label="角色">
				</el-table-column>
				<el-table-column
				  prop="teamCount"
				  label="团队数">
				</el-table-column>
				<el-table-column
				  prop="status"
				  label="状态">
				</el-table-column>
				<el-table-column
				  label="操作">
				<a href="#"> <img style="width: 20px; margin-right:6px" src="../../../static/images/上传@2x.png" ></a>
				<a href="#"> <img style="width: 20px; margin-right:6px" src="../../../static/images/一键交卷@2x.png" ></a>
				<a href="#"> <img style="width: 20px; margin-right:6px" src="../../../static/images/统计@2x.png" ></a>
				<a href="#"> <img style="width: 20px; margin-right:6px" src="../../../static/images/删除@2x.png" ></a>
				</el-table-column>
			  </el-table>

		</div>
		<div>
			共个项目，个已
		</div>
		<div class="commit-task">
			 <el-button type="primary" @click="OpenForm">发布任务</el-button>
		</div>
		
		<el-dialog title="发布任务" :visible.sync="dialogForm">
		  <el-form :model="form">
		    <el-form-item label="任务名称" :label-width="formLabelWidth">
		      <el-input v-model="form.taskName" autocomplete="off" style="width: 308px"></el-input>
		    </el-form-item>
		    <el-form-item label="选择试卷" :label-width="formLabelWidth" >
		      <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 308px">
		        <el-option label="区域一" value="shanghai"></el-option>
		        <el-option label="区域二" value="beijing"></el-option>
		      </el-select>
		    </el-form-item>
			<el-form-item label="上半场" :label-width="formLabelWidth" >
			   <el-date-picker
			        v-model="TimeDate1"
			        type="date"
			        placeholder="选择日期">
			      </el-date-picker>
				  <el-time-picker
				      is-range
				      v-model="Time1"
				      range-separator="至"
				      start-placeholder="开始时间"
				      end-placeholder="结束时间"
				      placeholder="选择时间范围">
				    </el-time-picker>
			</el-form-item>
			<el-form-item label="下半场" :label-width="formLabelWidth" >
			   <el-date-picker
			        v-model="TimeDate2"
			        type="date"
			        placeholder="选择日期">
			      </el-date-picker>
				  <el-time-picker
				      is-range
				      v-model="Time2"
				      range-separator="至"
				      start-placeholder="开始时间"
				      end-placeholder="结束时间"
				      placeholder="选择时间范围">
				    </el-time-picker>
			</el-form-item>
			<el-form-item label="是否开启答案" :label-width="formLabelWidth" >
				  <el-radio v-model="radio" label="1">是</el-radio>
				  <el-radio v-model="radio" label="2">否</el-radio>
			   
			</el-form-item>
			<el-form-item label="团队数量" :label-width="formLabelWidth" >
			     <el-input-number v-model="num"  :min="1" :max="10" label="描述文字"></el-input-number><span style="margin-left: 20px;">组</span>

			</el-form-item>
			<el-form-item label="一等奖" :label-width="formLabelWidth" >
			     <el-input-number v-model="numOne"  :min="1" :max="10" label="描述文字"></el-input-number><span style="margin-left: 20px;">个</span>
			
			</el-form-item>
			<el-form-item label="二等奖" :label-width="formLabelWidth" >
			     <el-input-number v-model="numTwo"  :min="1" :max="10" label="描述文字"></el-input-number><span style="margin-left: 20px;">个</span>
			
			</el-form-item>
			<el-form-item label="三等奖" :label-width="formLabelWidth" >
			     <el-input-number v-model="numThree"  :min="1" :max="10" label="描述文字"></el-input-number><span style="margin-left: 20px;">个</span>
			
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogForm = false">取 消</el-button>
		    <el-button type="primary" @click="EnterTask">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		name:'taskCenter',
		data(){
			return {
				dialogForm:false,
				form:{
					
					
				},
				radio:'1',
				Time1:'',
				Time2:'',
				TimeDate1:'',
				TimeDate2:'',
				num:1,
				numOne:1,
				numTwo:1,
				numThree:1,
				tableData:[
						{
						 taskName:'任务一',
						 startTime:'2021/11/23Z11:30',
						 endTime:'2021/11/24Z11:20',
						 role:'随机分配',
						 teamCount:20,
						 status:2
						},
						{
						 taskName:'任务二',
						 startTime:'2021/10/23Z11:30',
						 endTime:'2021/10/24Z11:20',
						 role:'随机分配',
						 teamCount:20,
						 status:1
						},
						{
						 taskName:'任务三',
						 startTime:'2021/9/23Z11:30',
						 endTime:'2021/9/24Z11:20',
						 role:'随机分配',
						 teamCount:20,
						 status:0
						},
						  ],
						  
				formLabelWidth:"120px",
				
			}
		},
		beforeMount() {
			
			this.tableData =  this.tableData.map(val =>{

				return{
					taskName:val.taskName,
					startTime:val.startTime.slice(0,10),
					endTime:val.endTime,
					role:val.role,
					teamCount:val.teamCount,
					status:val.status
				}
			})
			console.log(this.tableData)
		},

		mounted() {
			let data = 
				{
				  mobilePhone: "K007",
				  password: "123456"
				}
			
			this.$axios({
			    headers: {
			       'token': '',
			       "Content-Type": "application/json;",
			    },
			    method: 'post',
			    url: 'http://192.168.1.170:5222/auditskill/Auth/FormalLogin',
			    data : JSON.stringify(data),
			}).then( res => {
				sessionStorage.setItem('token',res.data.accessToken)
			})
			
		},
	
		methods:{
			OpenForm(){
				this.dialogForm = true
			},
			EnterTask(){
				var token = sessionStorage.getItem('token');
				console.log(token)
				this.dialogForm =false
				let data = {
						  id: 0,
						  auditId: 0,
						  auditName: "string",
						  examType: 0,
						  competitionType: 0,
						  taskName: "string",
						  competitionDate: "2021-11-22T12:23:41.468Z",
						  participantsNum: 0,
						  isSameTime: true,
						  isRoleRandom: true,
						  answerShowType: 0,
						  isFormalCompetition: true,
						  competitionVenuesInfos: [
						    {
						      id: 0,
						      taskId: 0,
						      venues: 0,
						      name: "string",
						      matchName: "string",
						      startTime: "2021-11-22T12:23:41.468Z",
						      endTime: "2021-11-22T12:23:41.468Z",
						      score: 0
						    }
						  ],
						  auditItems: [
						    {
						      id: 0,
						      auditId: 0,
						      audiTarget: 0,
						      venues: 0,
						      caseId: 0,
						      caseName: "string",
						      totalScore: 0,
						      showQuestions: [
						        {
						          auditItemId: 0,
						          questionId: 0,
						          questionName: "string",
						          sort: 0
						        }
						      ]
						    }
						  ],
						  firstPrizeNumber: 0,
						  secondPrizeNumber: 0,
						  thirdPrizeNumber: 0,
						  taskDataType: 0,
						  peopleNumber: 0,
						  submitedNotice: "string"
						}
						
				 this.$axios({
				     headers: {
				        'token': token,
				        "Content-Type": "application/json;",
				     },
				     method: 'post',
				     url: 'http://192.168.1.170:5222/auditskill/Task/SaveCompetitionTask',
				     data : JSON.stringify(data),
				 }).then(res => {
					 
				 })
			}
		}
		
	}
</script>

<style scoped>
	.commit-task{
		width: inherit;
		height: 140px;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.el-table{
		border: 1px #DCE0E3 solid;
		margin-left: 10px;
	}
	.header{
		height: 60px;
		padding-left: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.task{
		width:1200px;
		height: 572px;
	}
	.top{
		padding-left: 19px;
		font-size: 16px;
		color:#FFFFFF;
		font-weight: 300;
		display: flex;
		align-items: center;
		width: 1200px;
		height: 52px;
		background-color: #338AFF;
	}
	.table-header{
		display: flex;
		height: 60px;
		width: 1158px;
		background-color: #F6F7F9;
	}
</style>
